<template>
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(bread, index) in breadList"
        :to="bread.path"
        :key="index + 1"
      >
      {{bread.meta.title}}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "VueTaoBreadcrumb",

  data() {
    return {
      breadList: [],
    };
  },

  mounted() {},
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },

  methods: {
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
      console.log(this.breadList);
    },
  },
  created() {
    this.getBreadcrumb();
  },
};
</script>

<style scoped>
.bread {
  width: 100%;
  height: 14px;
}
</style>